<script setup lang="ts">
import { ref, onMounted } from 'vue';
import type { PropType } from 'vue';
import { Play, Trash2 } from '@vben/icons';
import { $t } from '@vben/locales';
import { generateUUID } from '#/utils/generateUUID';
import SetTextFormat from '#/components/setTextFormat.vue';
import { UploadBanner } from './index';
defineOptions({ name: 'Query' });

interface BannerType {
  bannerUrl: string;
  textConfigs: {
    id: string;
    name: string;
    desc: string;
    textFormatConfigs: {
      fontSize: number;
      fontColor: string;
      fontBold: boolean;
      italic: boolean;
      underline: boolean;
      alignCenter: string;
      textWidth: number;
      textHeight: number;
    };
    x: number;
    y: number;
    isActive: boolean;
  }[];
}
const props = defineProps({
  banner: {
    type: Object as PropType<BannerType>,
    required: true,
  }
});

const fontSizeList = ref<{ label: string; value: number }[]>([])
const handlePlay = (item: any) => {
  item.isActive = !item.isActive
}
const handleDeleteAttribute = (config: any) => {
  props.banner.textConfigs = props.banner.textConfigs.filter((item: any) => item.id !== config.id)
}
const handleAddText = () => {
  props.banner.textConfigs.push({
    id: generateUUID(),
    name: $t('certificate.settingBanner.textContent'),
    desc: '',
    textFormatConfigs: {
      fontSize: 20,
      fontColor: '#000000',
      fontBold: false,
      italic: false,
      underline: false,
      alignCenter: 'center',
      textWidth: 0,
      textHeight: 0,
    },
    x: 50,
    y: 50,
    isActive: true,
  })
}
onMounted(() => {
  fontSizeList.value = Array.from({ length: 51 }, (_, index) => index + 10).map((item: number) => {
    return {
      label: `${item}px`,
      value: item
    }
  })
})

const emit = defineEmits(['update:modelValue', 'queryData', 'resetQuery']);

</script>
<template>
  <div class="w-full h-full overflow-scroll pr-[1px]">
    <el-form class="w-full" label-position="top">
      <el-form-item class=" w-full border-b border-[#DCDFE6] pb-[20px] mb-[15px]" label=" " prop="bannerUrl"
        :label-width="0">
        <div class="w-full flex justify-between pl-[14px]">
          <div class="flex-none w-[60px]">
            <span class="text-[#595959]">{{ $t('certificate.settingBanner.backgroundImage') }}</span>
          </div>
          <div class="flex-auto">
            <UploadBanner v-model:modelValue="props.banner" />
          </div>
        </div>
      </el-form-item>
      <div class="w-full affix-container">
        <el-affix position="top" :offset="65" target=".affix-container">
          <div class="w-full bg-[#fff]">
            <el-button type="primary" @click="handleAddText" class="mb-[15px]">{{
              $t('certificate.settingBanner.addText')
              }}</el-button>
          </div>
        </el-affix>
        <el-form-item class="w-full" v-for="item in props.banner.textConfigs" :label="item.name" :key="item.name">
          <template #label>
            <div
              class="w-full flex items-center justify-between bg-[#F2F7FD] rounded-[4px] p-[5px] text-[#191919] font-[500]">
              <div @click="handlePlay(item)" class="cursor-pointer select-none">
                <Play fill="#595959" class="text-[#595959] play-icon scale-[0.6] inline-block align-top"
                  :class="{ 'play-icon-active': item.isActive }"></Play>
                <span>{{ item.name }}</span>
              </div>
              <el-button link :icon="Trash2" @click="handleDeleteAttribute(item)" />
            </div>
          </template>
          <template #default>
            <div :class="{ 'hidden': !item.isActive }" class="w-full pt-[12px] transition-all duration-200">
              <div class="flex items-top mb-[20px]">
                <div class="w-[60px] mr-[12px] text-[#595959] text-[14px] leading-[22px] text-right">{{
                  $t('certificate.settingBanner.textDesc') }}</div>
                <el-input class="flex-1" :style="{ fontSize: item.textFormatConfigs.fontSize + 'px' }" type="textarea" maxlength="50" show-word-limit :rows="3" v-model="item.desc"
                  :placeholder="$t('common.inputPhTxt', [$t('certificate.settingBanner.textDesc')])" />
              </div>
              <div class="flex items-center mb-[20px]">
                <div class="flex-none w-[60px] mr-[12px] text-[#595959] text-[14px] leading-[22px] text-right">{{
                  $t('certificate.settingBanner.textSetting') }}</div>
                <SetTextFormat class="flex-auto" v-if="item.isActive" v-model:modelValue="item.textFormatConfigs" />
              </div>
              <div class="flex mb-[10px]">
                <div class="w-[60px] mr-[12px] text-[#595959] text-[14px] leading-[32px] text-right">{{
                  $t('certificateTemplate.positionTxt') }}</div>
                <span class="mr-[5px]">X</span><el-input-number :min="0" :precision="2" :controls="false"
                  class="w-[110px] mr-[25px]" type="number" v-model="item.x"
                  :placeholder="$t('certificateTemplate.xTxt')" />
                <span class="mr-[5px]">Y</span><el-input-number :min="0" :precision="2" :controls="false"
                  class="w-[110px]" type="number" v-model="item.y" :placeholder="$t('certificateTemplate.yTxt')" />
              </div>
            </div>
          </template>
        </el-form-item>
      </div>
    </el-form>
  </div>
</template>
<style lang="scss" scoped>
:deep(.el-button+.el-button) {
  margin-left: 0;
}

.play-icon {
  cursor: pointer;
  transition: transform 0.2s;
}

.play-icon-active {
  transform: rotate(90deg) scale(0.6);
  transition: transform 0.2s;
}
</style>
